<!DOCTYPE html>
<html>
    <head>
        <style id="stylesheet">
            .container {
                width: 50px;
                height: 50px;
            }
            .bottom-margin {
                margin-bottom: 50px;
            }
            .ahem {
                font: 10px/1 Ahem, sans-serif;
                color: green;
            }
            .parent {
                background-color: red;
                border: 1px solid red;
            }
            .child {
                background-color: green;
            }
            .vertical { -webkit-writing-mode: vertical-lr; }
        </style>
        <script src="../../resources/check-layout.js"></script>
        <script>
            window.onload = function () {
                checkLayout(".parent");
            }
        </script>
    </head>
    <body>
        <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=26559">Bug 26559</a>: When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly</h1>
        <h1>Tests to make sure a child with percentage height is computed properly when the parent has a max or min height set.</h1>
        <h2>Each of the following tests should display a green rectangle with a 1 pixel red border on all sides.</h2>
        <h3>Parent with fixed height and min set</h2>
        <div id="simple-min" class="parent" style="width: 50px; height: 50px; min-height: 75px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
        </div>
        <h3>Parent with fixed height and max set</h2>
        <div id="simple-max" class="parent" style="max-height: 25px; width: 50px; height: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
        </div>
        <h3>Parent with fixed height and min greater than max</h2>
        <div id="min-greater-max" class="parent" style="width: 50px; height: 50px; min-height: 75px; max-height: 25px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
        </div>
        <h3>Vertical parent with fixed width and max set</h2>
        <div id="vertical-max" class="parent" style="width: 50px; max-width: 25px; height: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="25" data-expected-height="50"></div>
        </div>
        <h3>Vertical parent with fixed width and min set</h2>
        <div id="vertical-min" class="parent" style="width: 50px; min-width: 75px; height: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="75" data-expected-height="50"></div>
        </div>
        <h3>Parent with percent height and a max set</h3>
        <div class="container bottom-margin">
            <div id="parent-percent-max" class="parent" style="max-height: 25px; width: 50px; height: 100%">
                <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
            </div>
        </div>
        <h3>Parent with percent height and a min set</h3>
        <div class="container bottom-margin">
            <div id="parent-percent-min" class="parent" style="width: 50px; height: 100%; min-height: 75px">
                <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
            </div>
        </div>
        <h3>Parent with fixed height and percentage max</h3>
        <div class="container">
            <div id="percent-max" class="parent" style="max-height: 50%; width: 50px; height: 50px">
                <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
            </div>
        </div>
        <h3>Parent with fixed height and percentage min</h3>
        <div class="container bottom-margin">
            <div id="percent-min" class="parent" style="width: 50px; height: 50px; min-height: 150%">
                <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
            </div>
        </div>
        <h3>Parent with auto height and a max set. This test will not have the border all around, it will only be on the top portion.</h3>
        <div id="auto-max" class="parent ahem bottom-margin" style="max-height: 25px; width: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div>
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
        </div>
        <h3>Parent with auto height and a min set</h3>
        <div id="auto-min" class="parent ahem" style="width: 50px; min-height: 75px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div>
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
            XXXXX
        </div>
        <h2>The following two tests will have a 6 pixel red border.</h2>
        <h3>Parent with fixed height and padding and max set</h2>
        <div id="parent-padding-max" class="parent" style="max-height: 25px; width: 50px; padding: 5px; height: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
        </div>
        <h3>Parent with fixed height and padding and min set</h2>
        <div id="parent-padding-min" class="parent" style="width: 50px; padding: 5px; height: 50px; min-height: 75px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
        </div>
        <h3>Fixed height parent with scroll bar</h3>
        <div id="overflow" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 50px">
            <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div>
            XXXXXXXXXX
            XXXXXXXXXX
            XXXXXXXXXX
            XXXXXXXXXX
            XXXXXXXXXX
            XXXXXXXXXX
        </div>
        <h3>Parent with percent height and scroll bar</h3>
        <div class="container bottom-margin">
            <div id="overflow-percent" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 100%">
                <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div>
                XXXXXXXXXX
                XXXXXXXXXX
                XXXXXXXXXX
                XXXXXXXXXX
                XXXXXXXXXX
                XXXXXXXXXX
            </div>
        </div>
    </body>
</html>
